<template>
  <div class="app-comment-trends">
    <el-card>
      <table-bar :show-top="true" :show-bottom="false" @search="handleSearch" @reset="handleReset">
        <template #top>
          <el-form :inline="true" :model="formInline" class="form-search">
            <el-form-item label="评论ID">
          <el-input
            v-model="formInline.recommendCommentId"
            type="number"
            placeholder="请输入评论ID"
            clearable
          />
        </el-form-item>
          </el-form>
        </template>
      </table-bar>

      <art-table
        :data="tableData"
        :loading="tableLoading"
        :border="true"
        :total="total"
        :current-page="formInline.page"
        :page-size="formInline.pageSize"
        :page-sizes="[10, 20, 50, 100]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :show-header-background="true"
      >
        <el-table-column type="index" label="序号" width="80" align="center" />
        <el-table-column prop="recommendCommentId" label="评论ID" min-width="120" align="center" />
        <el-table-column prop="content" label="评论内容" show-overflow-tooltip min-width="200" />
        <el-table-column prop="recommendId" label="动态ID" min-width="120" align="center" />
        <el-table-column prop="userId" label="用户ID" min-width="120" align="center" />
        <el-table-column prop="commentAddress" label="发布地址" min-width="120" show-overflow-tooltip />
        <el-table-column prop="rootCommentId" label="最上级评论ID" min-width="140" align="center" />
        <el-table-column prop="parentCommentId" label="父评论ID" min-width="120" align="center" />
        <el-table-column prop="status" label="状态" min-width="120" align="center">
          <template #default="scope">
            <el-tag v-if="scope.row.statue === 0" type="success">未屏蔽</el-tag>
            <el-tag v-else-if="scope.row.statue === 1" type="danger">已屏蔽</el-tag>
            <el-tag v-else type="info">未知</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" min-width="180" />
        <el-table-column label="操作" min-width="200" align="center">
          <template #default="scope">
            <button-table
              :type="scope.row.statue === 0 ? 'delete' : 'success'"
              @click="handleUpdateStatus(scope.row.recommendCommentId, scope.row.statue === 0 ? 1 : 0)"
              :text="scope.row.statue === 0 ? '屏蔽' : '展示'"
            />
            <el-popconfirm title="确定要删除该评论吗？" @confirm="handleDelete(scope.row.recommendCommentId)" style="margin-left: 10px;">
              <template #reference>
                <button-table type="delete" text="删除" />              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </art-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { deleteRecommendComment, getAllRecommendComment, updateRecommendCommentStatus } from '@/api/commentApi';
import ArtTable from '@/components/Table/ArtTable.vue';
import TableBar from '@/components/Table/TableBar.vue';
import ButtonTable from '@/components/Form/ButtonTable.vue';
import { ApiStatus } from '@/utils/http/status';

// 查询参数
const formInline = reactive({
  recommendCommentId: undefined,
  page: 1,
  pageSize: 10
});

// 表格数据
const tableData = ref<any[]>([]);
const tableLoading = ref(false);
const total = ref(0);

// 获取数据列表
const getDataList = async () => {
  tableLoading.value = true;
  try {
    // 确保传递的参数符合后端要求
    const requestData: any = {
      page: formInline.page,
      pageSize: formInline.pageSize,
      recommendCommentId: formInline.recommendCommentId
    };

    // 移除值为 undefined 的字段
    Object.keys(requestData).forEach((key) => {
      if (requestData[key] === undefined) {
        delete requestData[key];
      }
    });

    const res = await getAllRecommendComment(requestData);
    if (res.code === ApiStatus.success) {
      // 根据后端实际返回的数据结构调整
      tableData.value = res.data?.list || res.data?.records || [];
      total.value = res.data?.total || 0;
    }
  } catch (error) {
    console.error('获取动态评论列表失败:', error);
    ElMessage.error('获取动态评论列表失败');
  } finally {
    tableLoading.value = false;
  }
};

// 搜索
const handleSearch = () => {
  total.value = 0;
  formInline.page = 1;
  getDataList();
};

// 重置
const handleReset = () => {
  Object.assign(formInline, {
    recommendCommentId: undefined,
    page: 1,
    pageSize: 10
  });
  getDataList();
};

// 删除
const handleDelete = async (commentId: string | number) => {
  try {
    tableLoading.value = true;
    const result = await deleteRecommendComment(String(commentId));
    // 只有当后端返回状态码为200时才显示成功信息
    if (result.code === ApiStatus.success) {
      ElMessage.success('删除成功');
      getDataList();
    } else {
      ElMessage.error('删除失败');
    }
  } catch (error) {
    console.error('删除评论失败:', error);
    ElMessage.error('删除失败');
  } finally {
    tableLoading.value = false;
  }
};

// 更新屏蔽状态
const handleUpdateStatus = async (commentId: string | number, status: number) => {
  try {
    tableLoading.value = true;
    const params = {
      recommendCommentId: commentId,
      status: status
    };
    const result = await updateRecommendCommentStatus(params);
    // 只有当后端返回状态码为200时才显示成功信息
    if (result.code === ApiStatus.success) {
      ElMessage.success(status === 1 ? '屏蔽成功' : '取消屏蔽成功');
      getDataList();
    } else {
      ElMessage.error('操作失败');
    }
  } catch (error) {
    console.error('更新状态失败:', error);
    ElMessage.error('操作失败');
  } finally {
    tableLoading.value = false;
  }
};

// 分页大小变化
const handleSizeChange = (size: number) => {
  formInline.pageSize = size;
  getDataList();
};

// 当前页变化
const handleCurrentChange = (current: number) => {
  formInline.page = current;
  getDataList();
};

// 初始加载
onMounted(() => {
  getDataList();
});
</script>

<style scoped lang="scss">
.app-comment-trends {
  padding: 20px;

  .form-search {
    margin-bottom: 15px;
  }

  // 响应式设计
  @media screen and (max-width: $device-phone) {
    padding: 10px;

    .form-search {
      .el-form-item {
        width: 100%;
        margin-bottom: 10px;

        .el-input {
          width: 100%;
        }
      }
    }
  }
}
</style>